<template>
  <div class="blog-container">
    <div class="blog-pages">
      <div class="col-md-12 panel">
        <div class="panel-body">
          <h2 class="text-center">{{ articleId ? '编辑文章':'创作文章' }}</h2>
          <hr>
          <div data-validator-form>
            <div class="form-group">
              <input
                v-model.trim="title"
                v-validator:blur.required="{ title: '标题' }"
                type="text"
                class="form-control"
                placeholder="请填写标题"
                @input="saveTitle"
              >
            </div>
            <div class="form-group">
              <textarea id="editor"></textarea>
            </div>
            <br>
            <div class="form-group">
              <button class="btn btn-primary" type="submit" @click="post">发 布</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SimpleMDE from "simplemde";
import hljs from "highlight.js";
// 使用本地存储
import ls from "@/utils/localStorage";

// 添加全局变量
window.hljs = hljs;

export default {
  name: "Create",
  data() {
    return {
      title: "",
      content: "",
      articleId: undefined //文章Id
    };
  },
  // 进入当前路由
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.setArticleId(vm.$route.params.articleId);
    });
  },
  // 离开当前路由守卫
  beforeRouteLeave(to, from, next) {
    this.clearData();
    next();
  },
  // 观察当前路由变化
  watch: {
    $route(to) {
      this.clearData();
      // 当前路由属性发生变化，则进行文章查找，及后续数据填充
      this.setArticleId(to.params.articleId);
    }
  },
  mounted() {
    const simplemde = new SimpleMDE({
      element: document.querySelector("#editor"),
      placeholder:
        "请使用 Markdown 格式书写 ;-)，代码片段黏贴时请注意使用高亮语法。",
      spellChecker: false,
      autoDownloadFontAwesome: false,
      autosave: {
        enabled: true,
        uniqueId: "vuejs-essential"
      },
      // 插件渲染配置
      renderingConfig: {
        codeSyntaxHighlighting: true
      }
    });

    // 将插件内容绑定到vue响应数据上
    simplemde.codemirror.on("change", () => {
      this.content = simplemde.value();
    });

    this.simplemde = simplemde;
  },

  methods: {
    saveTitle() {
      ls.setItem("smde_title", this.title);
    },

    fillContent(articleId) {
      const simplemde = this.simplemde;
      const smde_title = ls.getItem("smde_title");

      if (articleId !== undefined) {
        const article = this.$store.getters.getArticleById(articleId);
        if (article) {
          const { title, content } = article;
          this.title = smde_title || title;
          this.content = simplemde.value() || content;

          simplemde.value(this.content);
        }
      } else {
        this.title = smde_title;
        this.content = simplemde.value();
      }
    },

    post() {
      const title = this.title;
      const content = this.content;

      if (title !== "" && content.trim() !== "") {
        const article = {
          title,
          content
        };
        // 从vuex中获取一篇文章
        this.$store.dispatch("post", { article, articleId: this.articleId });
        // 数据提交后清空显示内容
        this.clearData();
      }
    },

    clearData() {
      this.title = "";
      this.content = "";
      ls.removeItem("smde_title");
      this.simplemde.value("");
      this.simplemde.clearAutosavedValue();
    },

    setArticleId(articleId) {
      const localArticleId = ls.getItem("articleId");

      if (articleId !== undefined && !(articleId === localArticleId)) {
        this.clearData();
      }

      this.articleId = articleId;
      this.fillContent(articleId);
      ls.setItem("articleId", articleId);
    }
  }
};
</script>

<style scoped>
.blog-container {
  max-width: 980px;
  margin: 0 auto;
  margin-top: 20px;
}
textarea {
  height: 200px;
}
</style>
